<template>
  <el-menu id="myDiv" default-active="1-4-1" class="el-menu-vertical-demo" :collapse="isCollapse" style="text-align: left"
           background-color="#545c64"
           text-color="#fff"
           active-text-color="#ffd04b">
    <h3>{{!isCollapse ? '新青年后台管理系统' : '后台'}}</h3>
    <el-menu-item :index="item.id" v-for="item in noChildren" :key="item.id" @click="clickMenu(item)">
      <i :class="item.icon"></i>
      <span slot="title">{{item.label}}</span>
    </el-menu-item>
    <el-submenu :index="item.id" v-for="item in hasChildren" :key="item.id">
      <template slot="title">
        <i :class="item.icon"></i>
        <span slot="title">{{item.label}}</span>
      </template>
      <el-menu-item-group v-for="child in item.children" :key="child.id">
<!--        <span slot="title">分组一</span>-->
        <el-menu-item :index="child.id" @click="clickMenu(child)">{{child.label}}</el-menu-item>
      </el-menu-item-group>
    </el-submenu>


  </el-menu>
</template>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu {
  height: 110vh;
  border-right: none;
  h3 {
    color: white;
    text-align: center;
    line-height: 48px;
    font-size: 18px;
    font-weight: 400;
  }
}
</style>

<script>


export default {
  data() {
    return {

      menuData:[]
    };
  },
  mounted() {
    this.getMenuList();

    // var viewportHeight = window.innerHeight || document.documentElement.clientHeight;

// 将px值转换为vh
//     var vhValue = (600 / viewportHeight) * 100;
//     console.log("vhValue ",vhValue)
  },

  methods: {
    clickMenu(item){
      console.log(item);
      //防止重复点击
      if(item.path !== this.$route.path && !(this.$route.path === '/home' && item.path === '/')){
        this.$router.push({
          path: item.path
        });
      }
      this.$store.commit('changeBreadCrumb',item)
      // this.$store.commit('changeTitle',item.label)
    },
    getMenuList(){
      this.axios.get('http://115.159.84.44:24576/user/backend/v1/user/getMenuList',{
        headers:{
          'token': localStorage.getItem('token')
        }
      }).then((res)=>{
        console.log(res.data.data);
        this.menuData = res.data.data;
      });
    }
  },
  computed: {
    noChildren(){
      return this.menuData.filter(item =>
        item.children.length === 0
      )
    },
    hasChildren(){
      return this.menuData.filter(item =>
        item.children.length !== 0
      )
    },
    isCollapse(){
      return this.$store.state.tab.isCollapse;
    }
  }
}
</script>
